<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <title>实现按钮点击</title>
    <script src="./../lib/jquery-3.7.0.min.js"></script>

</head>
<body>
<!--
1. 直接为按钮添加onclick事件；
2. 使用DOM为按钮绑定onclick处理程序；
3. 获得按钮的jQuery对象，并将jQuery对象转为DOM对象，再为其添加事件监听；
4. 获得按钮的jQuery对象，并实现对象的click方法；
5.获得按钮的jQuery对象，并使用bind为该对象绑定click事件。
-->
直接为元素添加点击事件：
<button onclick="function_1()">按钮1</button>
<br>
使用DOM绑定click事件：
<button id="button_2">按钮2</button>
<br>
使用DOM的事件监听click：
<button id="button_3">按钮3</button>
<br>
使用jQuery的click方法：
<button id="button_4">按钮4</button>
<br>
使用jQuery的bind方法：
<button id="button_5">按钮5</button>
<br>
<script>
    /* 方式一 */
    function function_1() {
        window.alert("您已经点击了按钮1");
    }

    /* 方式二 */
    document.getElementById("button_2").onclick = function function_2() {
        window.alert("您已经点击了按钮2");
    }


    /* 方式三 */
    document.getElementById("button_3").addEventListener("click", function function_3() {
        window.alert("您已经点击了按钮3");
    })

    /* 方式四 */
    $("#button_4").click(function function_4() {
        window.alert("您已经点击了按钮4");
    })

    /* 方式五 */
    $("#button_5").bind("click", function function_5() {
        window.alert("您已经点击了按钮5");
    })
</script>
</body>
</html>